<link rel="stylesheet" href="__CDN__/assets/kindeditor/themes/default/default.css" />
<link rel="stylesheet" href="__CDN__/assets/webuploader/webuploader.css" />
<script src="__CDN__/assets/kindeditor/kindeditor.js?v=5"></script>
<script src="__CDN__/assets/kindeditor/lang/zh_CN.js"></script>
<script src="__CDN__/assets/js/jquery-1.11.3.min.js"></script>
<script src="__CDN__/assets/webuploader/webuploader.js"></script>
<style>
    .thumbnail {
        padding: 4px;
        margin-bottom: 17px;
        line-height: 1.42857143;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 3px;
        -webkit-transition: border 0.2s ease-in-out;
        -o-transition: border 0.2s ease-in-out;
        transition: border 0.2s ease-in-out;
        width: 150px;
        display: inline-block;
    }
</style>
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">文章标题:</label>
        <div class="col-xs-12 col-sm-8">
            <input class="form-control" name="title" type="text"  value="{$row.title}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">文章分类:</label>
        <div class="col-xs-12 col-sm-8">
            <select name="type_id" class="form-control">
                {volist name="kinds" id="val"}
                <option value="{$key}" {$row.type_id==$key?'selected':''}>{$val}</option>
                {/volist}
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">文章来源:</label>
        <div class="col-xs-12 col-sm-8">
            <input class="form-control" name="source" type="text" placeholder="非必填项,前沿资讯需要填写" value="{$row.source!=0?$row.source:''}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">列表显示:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="radio">
                <label class="radio-inline">
                    <input type="radio" name="list_show" value="1" {$row.list_show==1?'checked':''}> 单图
                </label>
                <label class="radio-inline">
                    <input type="radio" name="list_show" value="2" {$row.list_show==2?'checked':''}> 三图
                </label>
                <label class="radio-inline">
                    <input type="radio" name="list_show" value="3" {$row.list_show==3?'checked':''}> 视频
                </label>
                <label class="radio-inline">
                    <input type="radio" name="list_show" value="4" {$row.list_show==4?'checked':''}> 单张大图
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">是否置顶:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="checkbox">
                <label class="checkbox-inline">
                    <input type="checkbox" name="is_top" value="1" {$row.is_top!==''?'checked':''}> 置顶
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">是否设为热门:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="checkbox">
                <label class="checkbox-inline">
                    <input type="checkbox" name="is_hot" value="1" {$row.is_hot==1?'checked':''}> 热门
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">是否设为热搜:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="checkbox">
                <label class="checkbox-inline">
                    <input type="checkbox" name="is_hot_search" value="1" {$row.is_hot_search==1?'checked':''}> 热搜
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">是否设为推送:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="checkbox">
                <label class="checkbox-inline">
                    <input type="checkbox" name="is_push" value="1" {$row.is_push==1?'checked':''}> 推送
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">封面图:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="uploader-list">
                {volist name="cover" id="val"}
                <div class="file-item thumbnail already-img">
                    <img src="{$val}" width="100" height="100">
                    <div class="info">5a13f3387b172.png</div>
                    <div class="file-panel" style="background: #EA2000;color: #ffffff;text-align: center">
                        <span class="cancel" style="cursor: pointer;">删除</span>
                        <input type="hidden" name="img" value="{$val}">
                    </div>
                </div>
                {/volist}
            </div>
            <div id="fileList" class="uploader-list">

            </div>
            <div id="filePicker">选择图片</div>
            <input type="hidden" name="cover" value="{$row.cover}">
        </div>
        <script>
            function removeByValue(arr, val) {
                for(var i=0; i<arr.length; i++) {
                    if(arr[i] == val) {
                        arr.splice(i, 1);
                        break;
                    }
                }
            }

            var img_info = $(':hidden[name=cover]').val();
            img_info = img_info.split(',');
            console.dir(img_info);
            var uploader = WebUploader.create({
                // 选完文件后，是否自动上传。
                auto: true,
                // swf文件路径
                swf: '__CDN__/assets/webuploader/Uploader.swf',
                // 文件接收服务端。
                server: '{:Url("life.life/upload_picture")}',
                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#filePicker',
                // 只允许选择图片文件。
                accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/*'
                }
            });
            // 添加“添加文件”的按钮，
            uploader.addButton({
                id: '#filePicker2',
                label: '继续添加'
            });
            // 当有文件添加进来的时候
            uploader.on( 'fileQueued', function( file ) {
                var $li = $(
                    '<div id="' + file.id + '" class="file-item thumbnail already-img">' +
                    '<img>' +
                    '<div class="info">' + file.name + '</div>' +
                    '<div class="file-panel" style="background: #EA2000;color: #ffffff;text-align: center">' +
                    '<span class="cancel" style="cursor: pointer;"></span>' +
                    '<input type="hidden" name="img" value="{$val}">' +
                    '</div>' +
                    '</div>'
                    ),
                    $img = $li.find('img');

                // $list为容器jQuery实例
                $('#fileList').append( $li );

                // 创建缩略图
                // 如果为非图片文件，可以不用调用此方法。
                // thumbnailWidth x thumbnailHeight 为 100 x 100
                var thumbnailWidth = 100;
                var thumbnailHeight = 100;
                uploader.makeThumb( file, function( error, src ) {
                    if ( error ) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }

                    $img.attr( 'src', src );
                }, thumbnailWidth, thumbnailHeight );
            });
            // 文件上传过程中创建进度条实时显示。
            uploader.on( 'uploadProgress', function( file, percentage ) {
                var $li = $( '#'+file.id ),
                    $percent = $li.find('.progress span');

                // 避免重复创建
                if ( !$percent.length ) {
                    $percent = $('<p class="progress"><span></span></p>')
                        .appendTo( $li )
                        .find('span');
                }

                $percent.css( 'width', percentage * 100 + '%' );
            });
            // 文件上传成功，给item添加成功class, 用样式标记上传成功。
            uploader.on( 'uploadSuccess', function( file, response ) {
                img_info.push(response.name);
                $(':hidden[name=cover]').val(img_info);

                $( '#'+file.id ).addClass('upload-state-done');
                var $li = $( '#'+file.id ),
                    $error = $li.find('div.error');

                // 避免重复创建
                if ( !$error.length ) {
                    $error = $('<div class="error"></div>').appendTo( $li );
                }

                $error.text('上传成功');
            });
            // 文件上传失败，显示上传出错。
            uploader.on( 'uploadError', function( file ) {
                console.dir(file);
                var $li = $( '#'+file.id ),
                    $error = $li.find('div.error');

                // 避免重复创建
                if ( !$error.length ) {
                    $error = $('<div class="error"></div>').appendTo( $li );
                }

                $error.text('上传失败');
            });
            // 完成上传完了，成功或者失败，先删除进度条。
            uploader.on( 'uploadComplete', function( file ) {
                $( '#'+file.id ).find('.progress').remove();
            });
            $('.cancel').click(function () {
                var img_path = $(this).next('input').val();
                removeByValue(img_info, img_path);
                $(':hidden[name=cover]').val(img_info);
                $(this).parents('.already-img').remove();
            });
        </script>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">文章内容:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea style="width:100%;height:400px" name="auto_content">{$row.auto_content}</textarea>
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">提交</button>
        </div>
    </div>
</form>
<script type="text/javascript">
    var editor;
    KindEditor.ready(function(K) {
        editor = K.create('textarea[name="auto_content"]', {
            allowFileManager : true,
            resizeType:0,
            //autoHeightMode : true,
            afterCreate : function() {
                this.sync();
                this.loadPlugin('autoheight');
            },
            afterChange: function(){ //编辑器内容发生变化后，将编辑器的内容设置到原来的textarea控件里
                this.sync();
            },
            afterBlur : function(){ //编辑器聚焦后，将编辑器的内容设置到原来的textarea控件里
                this.sync();
            }
        });
    });
</script>
